<template>
  <div class="detailMessage">
    <div class="attrName">{{ attrList.label }}:</div>
    <div
      class="attrValue"
      :class="[attrList.label === '所属项目' ? 'blue' : '', attrList.id === 'state.state' ? 'state' : '']"
    >
      <a-tooltip>
          <template slot="title">
            <span v-if="attrList.value === 'COMPLETED'">已完成</span>
            <span v-else-if="attrList.value === 'INPROCESS'">进行中</span>
            <span v-else-if="attrList.value === 'NOTOPEN'">未开启</span>
            <span v-else-if="attrList.value === 'SCHEDULED'">已排程</span>
            <span v-else-if="attrList.value === 'PENDINGAPPROVAL'">待审核</span>
            <span v-else-if="attrList.value === 'APPROVAL_REJECTED'">审核驳回</span>
            <span v-else-if="attrList.value === 'SUSPENDED'">暂停</span>
            <span v-else-if="attrList.id === 'state.state'" v-html="attrList.value"></span>
            <span v-else>{{ attrList.value }}</span>
          </template>
        <span v-if="attrList.value === 'COMPLETED'">已完成</span>
        <span v-else-if="attrList.value === 'INPROCESS'">进行中</span>
        <span v-else-if="attrList.value === 'NOTOPEN'">未开启</span>
        <span v-else-if="attrList.value === 'SCHEDULED'">已排程</span>
        <span v-else-if="attrList.value === 'PENDINGAPPROVAL'">待审核</span>
        <span v-else-if="attrList.value === 'APPROVAL_REJECTED'">审核驳回</span>
        <span v-else-if="attrList.value === 'SUSPENDED'">暂停</span>
        <span v-else-if="attrList.id === 'state.state'" v-html="attrList.value"></span>
        <span v-else>{{ attrList.value }}</span>
      </a-tooltip>
      
    </div>
  </div>
</template>
<script>
export default {
  name: "detailMessage",
  props: {
    attrList: {
      type: Object,
      default: () => {
      }
    }
  }
};
</script>
<style lang="less" scoped>
.detailMessage {
  display: flex;
  justify-content: flex-start;
  .attrName {
    color: #666;
  }
  .attrValue {
    color: #333;
    display: inline-block;
    word-break: break-all;
    padding-left: 10px;
    max-width: 550px;
    text-align: left;
    /deep/strong{
      font-weight: bolder!important;
    }
  }
  .state{
    max-width: 700px!important;
  }
  .blue {
    color: #386df3;
  }
}
</style>